@charset="utf-8";
/* ---- contact ---- */
.contact {background: url(../images/bg_contact.jpg) top center no-repeat;height: 110px;}

/* ---- product ---- */
.product {box-shadow: 0px 10px 10px 5px #dddddd;}
.product .title {width: 75em;margin: 0 auto;padding: 1.5em 0;text-align: center;}
.product .title h3 {font-size: 1.75em;line-height: 1.5em;color: #3278bf;text-transform: uppercase;}
.product .title p {font-size: 0.875em;line-height: 1.5em;color: #707070;}
.product .title hr {width: 3.125em;margin: 1em auto;height: 5px;background-color: #bcbcbc;}

.product-body {width: 75em;margin: 0 auto;padding: 2em 0;}
.tab-box {}

.tab-box .hd ul {text-align: center;}
.tab-box .hd ul:after {content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;}
.tab-box .hd li {display: inline-block;font-size: 1.25em;line-height: 2.5em;padding: 0 2em;margin: 0 1em;background-color: #16a4ad;color: white;cursor: pointer;}
.tab-box .hd li.active {background-color: #2e75bb;}

.tab-box .bd {width: 100%;margin: 0 auto;height: 19em;overflow: hidden;position: relative;}
.tab-box .bd .tab-list {width: 100%;margin: 1.5em 0;overflow: hidden;display: none;position: absolute;}
.tab-box .bd .tab-list:after {content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;}
.tab-box .bd .show {display: block;}
.tab-box .bd ul {width: 200%;position: relative;}
.tab-box .bd li {float: left;width: calc(12.5% - 3.4375em);margin: 1em 1.71875em;}
.tab-box .bd li .img-box {width: 100%;height: 11.5em;overflow: hidden;}
.tab-box .bd li .img-box img {display: block;margin: 0 auto;max-width: 100%;min-height: 100%;transition: all 0.5s;}
.tab-box .bd li p {text-align: center;font-size: 1.25em;line-height: 2em;background-color: #16a4ad;color: white;}
.tab-box .bd li:hover img {transform: scale(1.1);}
.tab-box .bd li:hover p {background-color: #2e75bb;}
.product-body .product-more {width: 8.25em;line-height: 2.5em;margin: 0 auto;text-align: center;background-color: #16a4ad;border-radius: 20px;}
.product-body .product-more a {display: block;color: white;}

/* ---- honor ---- */
.honor {}
.honor .title {width: 75em;margin: 0 auto;padding: 1.5em 0;text-align: center;}
.honor .title h3 {font-size: 1.75em;line-height: 1.5em;color: #3278bf;text-transform: uppercase;}
.honor .title p {font-size: 0.875em;line-height: 1.5em;color: #707070;}
.honor .title hr {width: 3.125em;margin: 1em auto;height: 5px;background-color: #bcbcbc;}
.honor-body {width: 75em;margin: 0 auto;overflow: hidden;padding: 1em 0;}
.honor-body ul {width: 200%;position: relative;}
.honor-body ul:after {content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;}
.honor-body li {float: left;width: calc(12.5% - 6.25em);margin: 1em 3.125em;padding: 1em;background-color: #16a4ad;}
.honor-body li img {display: block;margin: 0 auto;max-width: 100%;min-height: 100%;}

/* ---- advantage ---- */
.advantage {background: url(../images/bg_advantage.png) top center no-repeat;}
.advantage-body {width: 75em;margin: 0 auto;height: 900px;}

/* ---- about ---- */
.about {background: url(../images/bg_about.jpg) top center no-repeat;height: 600px;}
.about .title {width: 75em;margin: 0 auto;padding: 1.5em 0;text-align: center;}
.about .title h3 {font-size: 1.75em;line-height: 1.5em;color: white;text-transform: uppercase;}
.about .title p {font-size: 0.875em;line-height: 1.5em;color: white;}
.about-body {width: 75em; margin: 0 auto;padding: 2em 0;}
.about-text {width: 75%;margin: 0 auto;text-align: center;line-height: 2em;}
.about-list ul:after {content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;}
.about-list li {float: left;width: calc(33.333333% - 3.75em);margin: 1em 1.875em;padding: 0.75em;background-color: #8adae1;}
.about-list li .img-box {width: 100%;height: 11.25em;overflow: hidden;}
.about-list li .img-box img {display: block;margin: 0 auto;max-width: 100%;min-height: 100%;}
.about-body .about-more {width: 8.25em;line-height: 2.5em;margin: 1.5em auto 0;text-align: center;background-color: #2e75bb;/*border-radius: 20px;*/}
.about-body .about-more a {display: block;color: white;}

/* ---- news ---- */
.news {padding-bottom: 2em;}
.news .title {width: 75em;margin: 0 auto;padding: 1.5em 0;text-align: center;}
.news .title h3 {font-size: 1.75em;line-height: 1.5em;color: #000000;text-transform: uppercase;}
.news .title p {font-size: 0.875em;line-height: 1.5em;color: #707070;}
.news .title hr {width: 3.125em;margin: 1em auto;height: 5px;background-color: #2e75bb;}
.news-body {width: 75em;margin: 0 auto;padding: 1.5em 0;}
.news-body ul:after {content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;}
.news-body li {float: left;width: calc(25% - 1em); margin: 0.5em;position: relative;overflow: hidden;}
.news-body li .img-box {width: 100%;height: 23.625em;overflow: hidden;}
.news-body li .img-box img {display: block;margin: 0 auto;max-width: 100%;min-height: 100%;}
.news-body li .img-cover {width: 100%;height: 100%;padding: 1.5em;background: rgba(235,235,235,0.8);position: absolute;top: 0;/*overflow: hidden;*/transition: all 0.5s;}
.news-body li .img-cover i {display: block;width: 42px;height: 38px; background: url(../images/icon/icon_more.png) 50% 50% no-repeat red;position: absolute;right: 24px;top: -80px;transition: all 0.5s;}
.news-body li .img-cover h3 {font-size: 1.25em;line-height: 1.5em;font-weight: normal;color: #000000;position: absolute;left: 24px;top: 40px;transition: all 0.5s;}
.news-body li .img-cover p {width: calc(100% - 3em);font-size: 1em;line-height: 1.5em;height: 6em;overflow: hidden;text-indent: 2em;color: #333333;position: absolute;left: 24px;top: 160px;transition: all 0.5s;}
.news-body li .img-cover span {font-size: 0.75em;line-height: 2em;color: #666666;position: absolute;left: 24px;top: 336px;transition: all 0.5s;}
.news-body li:hover .img-cover {top: 240px;background: rgba(0,0,0,0.5);}
.news-body li:hover .img-cover i {top: -200px;}
.news-body li:hover .img-cover h3 {top: 8px;color: white;}
.news-body li:hover .img-cover p {top: 36px;height: 4.5em;color: white;}
.news-body li:hover .img-cover span {top: 108px;color: white;}
.news-body .news-more {/*border-radius: 20px;*/border-bottom: 1px solid #dddddd;}
.news-body .news-more a {display: block;width: 8.25em;line-height: 2.5em;margin: 1.5em auto 0;text-align: center;color: white;background-color: #16a4ad;position: relative;top: 1.25em;}